<template>
    <div class="im-info">
        <q-avatar class="im-info-img">
            <img :src="item.user.avatar">
            <q-popup-proxy v-model="show" transition-show="flip-up" transition-hide="flip-down">
                <q-card class="im-info-small">
                    <q-img
                            :src="item.user.avatar"
                            class="im-info-small"
                    >
                        <div class="absolute-full text-subtitle1 ">
                            {{item.user.nick}}
                        </div>
                        <div class="absolute-bottom text-subtitle1 text-center">
                            <q-btn v-if="booGroup && item.from != getUserInfo.userId" flat round color="white" icon="chat">
                                <q-tooltip
                                        transition-show="scale"
                                        transition-hide="scale"
                                        :offset="[10, 10]"
                                >
                                    发消息
                                </q-tooltip>
                            </q-btn>
                            <q-btn v-if="booGroup && item.from != getUserInfo.userId" flat round color="secondary"
                                   icon="alternate_email" @click="atMember">
                                <q-tooltip
                                        transition-show="scale"
                                        transition-hide="scale"
                                        :offset="[10, 10]"
                                >
                                    @联系人
                                </q-tooltip>
                            </q-btn>
                            <q-btn v-if="item.from != getUserInfo.userId" flat round color="primary" icon="call">
                                <q-tooltip
                                        transition-show="scale"
                                        transition-hide="scale"
                                        :offset="[10, 10]"
                                >
                                    语音通话
                                </q-tooltip>
                            </q-btn>
                            <q-btn v-if="item.from != getUserInfo.userId" flat round color="green"
                                   icon="videocam">
                                <q-tooltip
                                        transition-show="scale"
                                        transition-hide="scale"
                                        :offset="[10, 10]"
                                >
                                    视频通话
                                </q-tooltip>
                            </q-btn>
                            <q-btn flat round color="amber" icon="account_circle" @click="toShowAccountDetailFu">
                                <q-tooltip
                                        transition-show="scale"
                                        transition-hide="scale"
                                        :offset="[10, 10]"
                                >
                                    联系人详情
                                </q-tooltip>
                            </q-btn>
                        </div>
                    </q-img>
                </q-card>
            </q-popup-proxy>
        </q-avatar>
    </div>
</template>

<script>
  import ProfileInfo from "../profile/indexTwo";

  export default {
    name: "infoSmall",
    props: {
      item: Object,
      getUserInfo: Object,
      booGroup: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        show: false
      }
    },
    methods: {
      atMember () {
        let e = {
          accountNum: this.item.user.userId,
          name: this.item.user.nick
        }
        this.$emit('atMemberFeedBack', e)
        this.show = false

      },
      toShowAccountDetailFu () {
        this.show = false
        this.$q.dialog({
          component: ProfileInfo,
          // 如果要访问自定义组件中的
          // 路由管理器、Vuex存储等,
          // 则为可选：
          parent: this, // 成为该Vue节点的子元素
                        // （“this”指向您的Vue组件）
                        // （此属性在<1.1.0中称为“root”
                        //  仍然可以使用，但建议切换到
                        //  更合适的“parent”名称）
          // （上述“component”和“parent”属性除外）：

          userInfo: this.item.user,
          booGroup: false
          // ...更多属性...
        })
      },
    }
  }
</script>

<style scoped>
    .im-info {
        padding-right: 5px;
        padding-left: 5px
    }



    .im-info-small {
        height: 200px;
        width: 250px
    }
</style>
